<!doctype html>
<html>
<head>

  <title>distribute dom-repeat</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="../../polymer.html">

</head>
<body>


  <dom-module id="x-container">
    <template>
      <content select="*"></content>
    </template>
    <script>
      Polymer({
        is: 'x-container'
      })
    </script>
  </dom-module>
  

  <dom-module id="x-test">
    <template strip-whitespace>
      <x-container id="container">
        <template class="foo" id="nug" is="dom-repeat" items="{{model}}">
          <div class="foo">{{item.id}}</div>
        </template>
      </x-container>
    </template>
    <script>
      Polymer({
        is: 'x-test',
        
        ready: function() {
          this.model = [
            {id: '1', text: 'How much do you like food?'},
            {id: '2', text: 'Where do you buy your groceries?'},
            {id: '3', text: 'What is your favourite colour?'}
          ];
          Polymer.dom.flush();
          var self = this;
          console.log(Polymer.dom(self.$.container).firstElementChild);
          setTimeout(function() {
            console.log('***');
            console.log(Polymer.dom(self.$.container).firstElementChild);
          }, 100);
        }
      })
    </script>
    </dom-module>

  <x-test></x-test>

</body>
</html>
